<!--
 * @Descripttion:
 * @version:
 * @Author: tanghao1
 * @Date: 2021-02-01 14:34:46
 * @LastEditors: tanghao1
 * @LastEditTime: 2021-04-02 17:36:31
-->
<template>
  <el-dialog
    ref="refDlg"
    :title="detailData===''? '新增图册' : '编辑图册'"
    :visible.sync="dialogShow"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    :hide-func-bar="true"
    :before-close="clearForm"
    width="600px"
    @close="closeDialog"
  >
    <div>
      <el-form ref="form" :model="formData" :rules="formRules" size="mini" label-width="100px">
        <el-row :gutter="20">
          <el-col :span="24">
            <el-form-item label="图册名称" prop="atlasName" :rules="atlasName">
              <el-input v-model="formData.atlasName" size="mini" placeholder="请输入导航名称" />
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="是否显示" prop="state">
              <el-switch
                v-model="formData.state"
                active-value="1"
                inactive-value="0"
              />
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="上传封面" prop="uplodaFile" :rules="uplodaFile">
              <el-upload
                class="avatar-uploader"
                :headers="headers"
                :action="uploadUrl"
                :show-file-list="false"
                :on-success="handleAvatarSuccess"
                :before-upload="beforeAvatarUpload"
              >
                <img v-if="imageUrl" :src="imageUrl" class="avatar">
                <i v-else class="el-icon-plus avatar-uploader-icon" />
              </el-upload>
            </el-form-item>
          </el-col>
        </el-row></el-form>
    </div>
    <div slot="footer">
      <el-button size="mini" @click="closeDialog">取消</el-button>
      <el-button size="mini" type="primary" @click="submitForm">保存</el-button>
    </div>
  </el-dialog>
</template>
<script>
import { getToken } from '@/utils/auth'
// import { confPriceFactor, factorTypeCodeReq } from '@/api/basdatApi' // 新增/编辑
import { saveAtlas, editAtlas } from '@/api/shopauxPlat/atlasManagement'
export default {
  name: 'DemoEditForm',
  props: {
    visible: {
      type: Boolean,
      default: false,
      required: true
    },
    detailData: {
      type: [String, Object],
      default: ''
    }
  },
  data() {
    return {
      picUrl: '',
      uploadUrl: `${process.env.VUE_APP_BASE_API}/api/v1/file/upload`,
      headers: {
        'X-Token': this.$store.getters.token ? getToken() : '',
        'Authorization': this.$store.getters.token ? 'Bearer ' + getToken() : ''
      },
      submiting: false,
      picFile: [],
      imageUrl: '',
      pricingTypeCodeList: [], // 因子类型
      formData: {
        atlasName: '',
        state: '1',
        detailData: []
      },
      formRules: {
        atlasName: [{
          required: true,
          message: '请输入图册名称',
          trigger: 'blur'
        }],
        state: [{
          required: true,
          message: '请选择是否显示',
          trigger: 'blur'
        }]
      }
    }
  },
  computed: {
    dialogShow: {
      get() {
        return this.visible
      },
      set(val) {
        this.$emit('update:visible', val)
      }
    }
  },
  created() {
    const data = this.detailData
    if (data.state === 1) {
      data.state = '1'
    }
    if (data) {
      this.formData = Object.assign({}, data)
      this.imageUrl = this.formData.picUrl
    }
  },
  methods: {
    handleAvatarSuccess(res, file) {
      this.picFile = file.response.data
      this.imageUrl = URL.createObjectURL(file.raw)
    },
    beforeAvatarUpload(file) {
      console.log(file)
      const isLt2M = file.size / 1024 / 1024 < 5
      const isJPG = file.type.split('/')[1]
      const allowPic = ['jpg', 'png', 'jpeg']
      if (!allowPic.includes(isJPG)) {
        this.$message.error('上传图片只能是 png/jpg 格式!')
        return
      }
      if (!isLt2M) {
        this.$message.error('上传图片大小不能超过 5MB!')
      }
      return isJPG && isLt2M
    },
    closeDialog() {
      this.dialogShow = false
    },
    // 提交表单处理
    submitForm() {
      if (this.formData.id) {
        this.formData.picUrl = this.picFile.url
        editAtlas(this.formData).then(res => {
          if (res.success === 1) {
            this.$message.success('保存成功')
            this.dialogShow = false
            this.$emit('refreshTable')
          }
        })
      } else {
        const data = {}
        data.atlasName = this.formData.atlasName
        data.picName = this.picFile.fileName
        data.picUrl = this.picFile.url
        data.state = this.formData.state
        saveAtlas(data).then(res => {
          if (res.success === 1) {
            this.$message.success('保存成功')
            this.dialogShow = false
            this.$emit('refreshTable')
          }
        })
      }
    }
  }
}
</script>
<style lang='scss' scoped>
.el-col el-col-11{margin-bottom: 20px;}
 .avatar-uploader .el-upload {
    border: 1px dashed #0c0202;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    border: 1px dashed #0c0202;
    border-radius: 6px;
    font-size: 28px;
    color: #8c939d;
    width: 120px;
    height: 120px;
    line-height: 120px;
    text-align: center;
  }
  .avatar {
    width: 120px;
    height: 120px;
    display: block;
  }
</style>
